<template>
  <section class='f-record'>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="overflow-y: auto;flex:1">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <section class="f-title">
          <div class="g-flex-ct" @click="openDatePicker">
            <p class="f-mr-05">{{currentDateStr}}</p>
            <van-icon name="arrow-down" />
          </div>
          <p>{{used_total}}</p>
        </section>

        <ul class="f-record-list">
          <li v-for="(item,index) in tableData" :key="index">
            <p>{{ getJoinDate(item.date) }}</p>
            <p>{{item.used}}</p>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>

    <Date-Picker ref="datePickerRef" type="time" @selectDate="selectDate"></Date-Picker>
  </section>
</template>
  
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../../api';
import { initDatepicker, getDateTime, getUnixTime, toThousands, getStore, getJoinDate } from '@/utils/utils';
import DatePicker from '@/components/DatePicker.vue'

export default {
  components: { DatePicker },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const datePickerRef = ref()

    const state = reactive({
      searchForm: {
        code: getStore('CURRENT_CODE').code,
        "endTime": "",
        "page": 1,
        "size": 10,
        "startTime": ""
      },

      loading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      total: 0,

      currentDateStr: "",
      showFilter: false,
      used_total: '0MB'
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '流量账单',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      state.searchForm.startTime = initDatepicker(4, 30 * 24 * 60 * 60 * 1000);
      state.searchForm.endTime = initDatepicker(3);
      let str = getDateTime(state.searchForm.startTime)[8] + ' 至 ' + getDateTime(state.searchForm.endTime)[8]
      state.currentDateStr = str

      // let currentDateStr = getDateTime(initDatepicker(3))[3]
      // state.currentDateStr = currentDateStr
      // state.searchForm.month = currentDateStr
    })

    const onLoad = () => {
      let json = JSON.parse(JSON.stringify(state.searchForm))
      json.startTime = getDateTime(json.startTime)[9]
      json.endTime = getDateTime(json.endTime)[9]

      if (state.refreshing) {
        state.tableData = [];
        state.refreshing = false;
      }

      api.useDetail(json).then(res => {
        state.refreshing = false

        if (res.data.data.length) state.searchForm.page += 1
        state.tableData.push(...res.data.data)
        state.used_total = res.data.used_total

        // 防止触发两次
        if (state.tableData.length >= res.data.page.totalCount) {
          state.finished = true;
        } else {
          state.finished = false;
        }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (state.tableData.length < 10) {
          state.finished = true;
        }
      }).catch(err => {
        state.loading = false;
        state.finished = true;
        state.refreshing = false
      })
    };

    const onRefresh = () => {
      state.searchForm.page = 1

      // 清空列表数据
      state.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      state.loading = true;
      onLoad();
    };

    const openDatePicker = () => {
      datePickerRef.value.datePopup = true
    }

    const selectDate = (e) => {
      if (e.popupTabs == 1) {
        let str = e.startStr + ' 至 ' + e.endStr
        state.currentDateStr = str
        state.searchForm.startTime = getUnixTime(e.startStr)
        state.searchForm.endTime = getUnixTime(e.endStr) - 999 + 24 * 60 * 60 * 1000;
        state.searchForm.month = ""
      } else {
        state.currentDateStr = e.currentDateStr
        state.searchForm.month = e.currentDateStr
        state.searchForm.startTime = ""
        state.searchForm.endTime = ""
      }

      state.refreshing = true
      onRefresh()
    }

    return {
      ...toRefs(state),
      datePickerRef,
      getJoinDate,
      getDateTime,
      onLoad,
      onRefresh,
      openDatePicker,
      selectDate,
      toThousands,
    }
  }
}
</script>
  
<style lang='scss' scoped>
.f-record {
  display: flex;
  flex-direction: column;
  .f-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    padding: 18px;
  }
  .f-record-list {
    background: #fff;
    padding-left: 14px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 41px;
      padding-right: 15px;
      padding-left: 5px;
    }
    li:not(:last-child) {
      border-bottom: 1px solid #aaaaaa;
    }
  }
}
</style>